<template>
  <div>
    <el-card>
      <template #header>
        <el-form :model="form" inline>
          <el-form-item label="公司名称:">
            <el-select v-model="form.keyWord" filterable clearable placeholder="请选择公司名称" @change="columnChange" style="width: 200px">
              <el-option v-for="item in options" :key="item.enterpriseId" :label="item.cmpName"
                :value="item.enterpriseCode" />
              <template #prefix>
                <el-icon class="el-input__icon">
                  <search />
                </el-icon>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="数据编码:">
            <el-input clearable v-model="form.dataCode" placeholder="请输入配置项编码" @input="columnChange">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <search />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>

      </template>
      <el-table ref="enterpriseRef" :data="tableData" style="width: 100%; max-height: 61vh; height: 61vh"
        table-layout="auto" v-loading="loading" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
        <!-- <el-table-column fixed prop="jobName" label="请求路径" /> -->
        <el-table-column fixed prop="enterName" label="企业名称" width="200" />
        <el-table-column prop="remark2" label="社会信用代码" width="140" />
        <el-table-column prop="requestUrl" label="请求路径" width="140" show-overflow-tooltip/>
        <el-table-column prop="requestTime" label="请求时间" width="180" />
        <el-table-column prop="responseCode" label="错误代码" width="100" />
        <el-table-column prop="remark1" label="模块" width="350" />
        <el-table-column prop="remark3" label="报错信息" width="140" show-overflow-tooltip/>
        <el-table-column prop="remark4" label="上报数据id" width="100" />
        <el-table-column prop="remark5" label="采集数据项编码" width="140" />
        <!-- <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <div
              v-if="
                scope.row.triggerState != 'ACQUIRED' &&
                scope.row.triggerState != 'BLOCKED' &&
                scope.row.triggerState != 'WAITING'
              "
            >
              <el-button
                link
                type="primary"
                size="small"
                @click="resume(scope.$index, scope.row)"
                >恢复任务</el-button
              >
            </div>
            <div v-else>
              <el-button
                link
                type="primary"
                size="small"
                @click="stopNow(scope.$index, scope.row)"
                >停止任务</el-button
              >
            </div>

            <el-button link type="primary" size="small">编辑</el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="delJob(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="card-footer">
        <el-pagination layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10,20,30,40,50,100,500]"
          background v-model:page-size="pagination.size"
          v-model:current-page="pagination.page" :total="pagination.total" @size-change="sizeChange"
          @current-change="pageChange" class="pagination" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { sbLog, getNameList } from "@/api/enterprise";
import { deleteEmptyProperty } from "@/utils/index";
import { ElMessage } from "element-plus";
const tableData = ref([]);
const loading = ref(true);
const conditions = ref([]);
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0,
  statDate: "",
});
const form = reactive({
  keyWord: "",
  dataCode: ""
});
const options = ref([]);
//sbLogQueryVO
const getList = () => {
  loading.value = true;
  let data = {
    pageSize: pagination.size,
    pageNum: pagination.page,
    condition: JSON.stringify(conditions.value),
  };
  getNameList()
    .then((res) => {
      options.value = res.data;
      sbLog(deleteEmptyProperty(data))
        .then((res) => {
          tableData.value = res.data.records;
          pagination.size = res.data.pageSize;
          pagination.page = res.data.currentPage;
          pagination.total = res.data.total;
          doEnterName();
          loading.value = false;
        })
        .catch((msg) => {
          //获取出错
          ElMessage.error("获取信息失败,请联系管理员！");
        });
    })
    .catch((msg) => {
      ElMessage.error("获取信息失败！请联系管理员！");
    });
};
/**
 * 页数据总数改变
 */
const sizeChange = (value) => {
  pagination.size = value;
  pagination.page = 1;
  getList();
};
/**
 * 页总数改变
 */
const pageChange = (value) => {
  pagination.page = value;
  getList();
};
const columnChange = () => {
  let cond = [];
  if (form.keyWord != "" && form.keyWord != undefined) {
    cond.push({
      column: "remark2",
      type: "eq",
      value: form.keyWord,
    });
  }
  if (form.dataCode != "" && form.dataCode != undefined) {
    cond.push({
      column: "remark5",
      type: "like",
      value: form.dataCode,
    });
  }
  conditions.value = cond;
  getList();
};
const doEnterName = () => {
  let tempTableData = tableData.value;
  let tempOptions = options.value;
  for (let i = 0; i < tempTableData.length; i++) {
    for (let j = 0; j < tempOptions.length; j++) {
      if (tempTableData[i].remark2 === tempOptions[j].enterpriseCode) {
        tempTableData[i]["enterName"] = tempOptions[j].cmpName;
        continue;
      }
    }
  }
  console.log(tempTableData)
  tableData.value = tempTableData;
};
getList();
</script>

<style lang="less" scoped>
.title {
  min-width: 5em;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-card__header {
  max-height: 10vh;
}

.pagination {
  max-height: 3vh;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.total-font {
  margin-right: 15px;
  font-weight: 500;
  line-height: 21px;
  color: #595959;
}
</style>
